<template>
  <div class="clearfix"><!--// class='show clearfix'-->
    <p class="title">总览</p>
    <p class="sub_title">
      业绩总览
    </p>

    <z-transparentBlock :type="'2'"/>
    <z-transparentBlock :type="'3'"/>
    <z-transparentBlock/>
    <z-transparentBlock/>
    <z-blueBottomFrame @handleContainerDom="handleChart_1" :spanTitle="['年','月','日']" :clickPosition="0"/>

    <p class="sub_title">
      业绩总览
    </p>

    <div class="item_content clearfix">
      <div class="item_list player_data_public">
        <z-fontBox class="reset"></z-fontBox>
        <z-fontBox type="1"><span class="icon-user-plus"></span></z-fontBox>
        <z-fontBox type="2"><span class="icon-drawer"></span></z-fontBox>
        <z-fontBox type="3"><span class="icon-eye"></span></z-fontBox>
      </div>
      <z-blueBottomFrame @handleContainerDom="handleChart_2" :spanTitle="['年','月','日']" :clickPosition="0" class="histogram player_data_public"/>
    </div>

    <z-blueBottomFrame @handleContainerDom="handleChart_3" :spanTitle="['年','月','日']" :clickPosition="0"/>

  </div>
</template>

<script>
import TransparentBlock from '../../components/block/TransparentBlock'
import BlueBottomFrame from '../../components/block/BlueBottomFrame'
import FontBox from '../../components/block/FontBox'
import echarts from 'echarts'
export default {
  name: 'DataChartsPage',
  components: {
    'z-transparentBlock': TransparentBlock,
    'z-blueBottomFrame': BlueBottomFrame,
    'z-fontBox': FontBox
  },
  methods: {
    handleChart_1(dom) {
      let myChart = echarts.init(dom)
      let option = null
      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }]
      }

      if (option && typeof option === 'object') {
        myChart.setOption(option, true)
      }
    },
    handleChart_2(dom) {
      let myChart = echarts.init(dom)
      let app = {}
      app.title = '坐标轴刻度与标签对齐'

      const option = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      }

      if (option && typeof option === 'object') {
        myChart.setOption(option, true)
      }
    },
    handleChart_3(dom) {
      let myChart = echarts.init(dom)
      const option = {
        title: {
          text: '天气情况统计',
          subtext: '虚构数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: 'center',
          data: ['西凉', '益州', '兖州', '荆州', '幽州']
        },
        series: [
          {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              {
                value: 1548,
                name: '幽州',
                label: {
                  normal: {
                    formatter: [
                      '{title|{b}}{abg|}',
                      '  {weatherHead|天气}{valueHead|天数}{rateHead|占比}',
                      '{hr|}',
                      '  {Sunny|}{value|202}{rate|55.3%}',
                      '  {Cloudy|}{value|142}{rate|38.9%}',
                      '  {Showers|}{value|21}{rate|5.8%}'
                    ].join('\n'),
                    backgroundColor: '#eee',
                    borderColor: '#777',
                    borderWidth: 1,
                    borderRadius: 4,
                    rich: {
                      title: {
                        color: '#eee',
                        align: 'center'
                      },
                      abg: {
                        backgroundColor: '#333',
                        width: '100%',
                        align: 'right',
                        height: 25,
                        borderRadius: [4, 4, 0, 0]
                      },
                      Sunny: {
                        height: 30,
                        align: 'left',
                        backgroundColor: {}
                      },
                      Cloudy: {
                        height: 30,
                        align: 'left',
                        backgroundColor: {}
                      },
                      Showers: {
                        height: 30,
                        align: 'left',
                        backgroundColor: {}
                      },
                      weatherHead: {
                        color: '#333',
                        height: 24,
                        align: 'left'
                      },
                      hr: {
                        borderColor: '#777',
                        width: '100%',
                        borderWidth: 0.5,
                        height: 0
                      },
                      value: {
                        width: 20,
                        padding: [0, 20, 0, 30],
                        align: 'left'
                      },
                      valueHead: {
                        color: '#333',
                        width: 20,
                        padding: [0, 20, 0, 30],
                        align: 'center'
                      },
                      rate: {
                        width: 40,
                        align: 'right',
                        padding: [0, 10, 0, 0]
                      },
                      rateHead: {
                        color: '#333',
                        width: 40,
                        align: 'center',
                        padding: [0, 10, 0, 0]
                      }
                    }
                  }
                }
              },
              { value: 535, name: '荆州' },
              { value: 510, name: '兖州' },
              { value: 634, name: '益州' },
              { value: 735, name: '西凉' }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      if (option && typeof option === 'object') {
        myChart.setOption(option, true)
      }
    }
  }

}
</script>

<style scoped>
  div.show {
    background-image: linear-gradient(#dbdfe1, #f4f8fb 10px);
    box-sizing: border-box;
    border-radius: 10px;
    padding: 10px 15px 0 40px;
    min-width: 1620px;
    overflow: auto;
  }

  div.show > .title {
    height: 60px;
    color: #36bbb5;
    font: 24px/60px "微软雅黑";
    border-bottom: 1px black solid;

  }

  div.show > .sub_title {
    border-left: 6px #36bbb5 solid;
    color: #36bbb5;
    height: 20px;
    font: 18px/20px "微软雅黑";
    margin: 18px 0;
    padding-left: 10px;

  }

  .player_data_public {
    height: 378px;
    box-sizing: border-box;

    background-color: #ffffff;
    border-radius: 8px;
    border-bottom: #36bbb5 9px solid;
  }

  .item_list {
    float: left;
    width: 412px;
    padding-top: 27px;
  }

  .reset {
    margin-left: 20px;
  }

  .histogram {
    width: 1065px;
    overflow: auto;
    margin-left: 20px;
    float: left;
  }
  .item_content {
    margin-bottom: 30px;
  }
</style>
